<template>
	<view class="content">
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="form-container">
			<u-form :model="registerForm" ref="registerForm">
				<view class="title">-账号信息-</view>
				<u-form-item label="用户昵称" prop="nickName" required :border-bottom="true" :label-width="135" :label-style="labelStyle">
					<u-input v-model="registerForm.nickName" placeholder="请输入用户昵称" border-color="black"
						placeholder-style="color:#808080" />
				</u-form-item>
				<u-form-item label="用户账号" prop="userName" required :border-bottom="true" :label-width="135" :label-style="labelStyle">
					<u-input v-model="registerForm.userName" placeholder="请输入用户账号" border-color="black"
						placeholder-style="color:#808080" />
				</u-form-item>
				<u-form-item label="用户密码" prop="password" required :label-width="135" :label-style="labelStyle">
					<u-input v-model="registerForm.password" type="password" :password-icon="true"
						placeholder="请输入用户密码" border-color="black" placeholder-style="color:#808080" />
				</u-form-item>
				<u-form-item label="确认密码" prop="repassword" required :label-width="135" :label-style="labelStyle">
					<u-input v-model="registerForm.repassword" type="password" :password-icon="true"
						placeholder="请输入确认密码" border-color="black" placeholder-style="color:#808080" />
				</u-form-item>
				<view class="title">-基本信息-</view>
				<u-form-item label="学/工号" prop="number" required :label-width="115" :label-style="labelStyle">
					<u-input v-model="registerForm.number" placeholder="请输入学/工号" border-color="black"
						placeholder-style="color:#808080" />
				</u-form-item>
				<u-form-item label="姓名" prop="name" required :label-width="115" :label-style="labelStyle">
					<u-input v-model="registerForm.name" placeholder="请输入姓名" border-color="black"
						placeholder-style="color:#808080" />
				</u-form-item>
				<u-form-item label="性别" prop="sex" required :label-width="115" :label-style="labelStyle">
					<u-radio-group v-model="registerForm.sex">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="身份" prop="identity" required :label-width="115" :label-style="labelStyle">
					<u-radio-group v-model="registerForm.identity">
						<u-radio v-for="(item, index) in radioList2" :key="index" :name="item.value">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="手机" prop="phonenumber" :label-width="115" :label-style="labelStyle">
					<u-input v-model="registerForm.phonenumber" placeholder="请输入手机号码" border-color="black"
						placeholder-style="color:#808080" maxlength="11"/>
				</u-form-item>
				<u-form-item label="邮箱" prop="email" :label-width="115" :label-style="labelStyle">
					<u-input v-model="registerForm.email" placeholder="请输入邮箱" border-color="black"
						placeholder-style="color:#808080" />
				</u-form-item>
			</u-form>
			<view class="button-container">
				<u-button :custom-style="customStyle" :ripple="true" shape="square" type="primary" @click="handleRegister">
					注册</u-button>
				<u-button :custom-style="customStyle" :ripple="true" shape="square" @click="reset">重置</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.registerForm.password) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
			}
			return {
				title: "注册",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				// 表单参数
				registerForm: {
					userName: undefined,
					nickName: undefined,
					password: undefined,
					repassword: undefined,
					number: undefined,
					name: undefined,
					phonenumber: undefined,
					email: undefined,
					sex:'0',
					identity:'1'
				},
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					width: "250rpx"
				},
				labelStyle: {
					fontWeight:'bold',
					fontSize:'26rpx'
				},
				radioList: [
					{
						name: '男',
						value: '0'
					},
					{
						name: '女',
						value: '1'
					}
				],
				radioList2: [
					{
						name: '学生',
						value: '1'
					},
					{
						name: '老师',
						value: '2'
					},
					{
						name: '工作人员',
						value: '3'
					}
				],
				rules: {
					userName: [
						{ required: true, message: '用户账号不能为空', trigger: 'blur' },
						{ min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
					],
					nickName: [
						{ required: true, message: '用户昵称不能为空', trigger: 'blur' }
					],
					identity: [
						{ required: true, message: '身份标识不能为空', trigger: 'blur' }
					],
					name: [
						{ required: true, message: '姓名不能为空', trigger: 'blur' }
					],
					number: [
						{ required: true, message: '学号/工号不能为空', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '用户密码不能为空', trigger: 'blur' },
						{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
					],
					repassword: [
					    { required: true, validator: validatePass2, trigger: 'blur' }
					],
					email: [
						{
						  type: 'email',
						  message: '请输入正确的邮箱地址',
						  trigger: ['blur', 'change']
						}
					],
					phonenumber: [
						{
						  pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
						  message: '请输入正确的手机号码',
						  trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			handleRegister(){
				this.$refs.registerForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						// 调用API集中管理中的register
						Vue.prototype.$u.api.register({
							nickName: this.registerForm.nickName,
							userName: this.registerForm.userName,
							password: this.registerForm.password,
							number: this.registerForm.number,
							name: this.registerForm.name,
							sex: this.registerForm.sex,
							identity: this.registerForm.identity,
							phonenumber: this.registerForm.phonenumber,
							email: this.registerForm.email
						}).then(res => {
							console.log(res)
							if(res.code == 200){
								uni.showToast({
									icon:"none",
									title:'注册成功！等待管理员审核！'
								})
								this.reset();
							}else {
								uni.showToast({
									icon:"none",
									title:res.msg
								})
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			// 表单重置
			reset() {
				this.registerForm = {
					userName: undefined,
					nickName: undefined,
					password: undefined,
					repassword: undefined,
					number: undefined,
					name: undefined,
					phonenumber: undefined,
					email: undefined,
					sex:'0',
					identity:'1'
				}
			}
		},
		onReady() {
			this.$refs.registerForm.setRules(this.rules);
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
	}
	
	.title {
		display: flex;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		padding-top: 20rpx;
	}
	
	.form-container {
		padding: 60rpx;
		color: black;
	}
	
	.button-container {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

</style>

